<template>
  <div class="record">
    <div class="dotgroup" v-for="(item, index) in data" :key="index">
      <div class="line"></div>
      <div class="left">{{ item.createTime }}</div>
      <div class="dot"></div>
      <div class="right">
        <!-- 操作人员、操作类型 -->
        <div class="text">
          <span v-if="item.name" style="margin-right: 10px">{{ item.name }}</span>
          <span>{{ item.operateName }}</span>
        </div>
        <!-- 手动分配、单条录入-分配到人员、来电自动保存、更改客户信息 -->
        <div v-if="item.changes && item.changes.length && item.isUpdate === 'change'" class="change">
          <div v-for="(va, id) in item.changes" :key="id">
            <!-- 非文本数组 -->
            <template v-if="va.type !== 'pairs'">
              <span>{{ va.label }}: </span>
              <span v-if="typeof va.oldValue === 'object'">
                <span v-for="(item, index) in va.oldValue" :key="index">
                  {{ item + ' ' }}
                </span>
              </span>
              <span v-else>{{ va.oldValue }}</span>
              <i class="MC_iconfont MC_icon-qu-you"></i>
              <span v-if="typeof va.newValue === 'object'">
                <span v-for="(item, index) in va.newValue" :key="index">
                  {{ item + ' ' }}
                </span>
              </span>
              <span v-else>{{ va.newValue }}</span>
            </template>
            <!-- 文本数组 -->
            <template v-else>
              <div class="pairs">
                <span class="label">{{ va.label }}: </span>
                <div class="pairs-left">
                  <div v-for="(item, index) in va.oldValue" :key="index">
                    {{ item.value + (item.memo ? ' (' + item.memo + ') ' : ' ') }}
                    <i v-if="!va.isNew" class="MC_iconfont MC_icon-qu-you"></i>
                  </div>
                </div>
                <div class="pairs-right">
                  <div v-for="(item, index) in va.newValue" :key="index">
                    <i v-if="va.isNew" class="MC_iconfont MC_icon-qu-you"></i>
                    {{ item.value + (item.memo ? ' (' + item.memo + ') ' : ' ') }}
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
        <!-- 关联客户、取消关联 -->
        <div v-if="item.changes && item.changes.length && item.isUpdate === 'relation'" class="change">
          <div v-for="(v, k) in item.changes" :key="k">
            <span>通话ID: {{ v.newValue }}</span>
            <i v-show="v.oldValue" class="MC_iconfont MC_icon-guanlian-quxiao"></i>
            <i v-show="v.newValue" class="MC_iconfont MC_icon-guanlian-shuangxiang"></i>
            <span>客户ID: {{ item.customerId }}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="moreShow" class="more" @click="handleMore">点击加载更多</div>
    <div v-else class="all">已经到底啦~</div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'LogRecord',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    moreShow: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit }) {
    const handleMore = () => {
      emit('loadMore')
    }

    return {
      handleMore
    }
  }
})
</script>

<style lang="stylus" scoped>
.record
  width 100%
  height calc(100% - 100px) !important
  padding 16px 0px
  overflow auto
  font-size 14px
  .line
    width 1px
    background linear-gradient(0deg, rgba(30, 99, 245, 0.3), rgba(30, 99, 245, 0.3)), #FFFFFF
    position absolute
    left 172px
    top 0
    bottom -30px
  .dotgroup
    display flex
    color #686e84
    line-height 20px
    position relative
    margin-bottom 30px
    .left
      flex 0 0 150px
      text-align right
      font-size 12px
      color rgba(0, 0, 0, 0.38)
    .dot
      background var(--mc-main-color)
      border-radius 50%
      width 6px
      height 6px
      margin 4px 20px 10px
      border 2px solid #fff
      z-index 1
      position relative
      left -2px
    .right
      flex auto
      .text
        font-weight 400
        color rgba(0, 0, 0, 0.88)
        margin-bottom 6px
        align-self baseline
        min-width 130px
      .change
        font-weight 400
        font-size 12px
        color rgba(0, 0, 0, 0.6)
        .pairs
          display flex
          .label
            margin-right 4px
          .&-left
            float left
          .&-right
            float right
        .MC_iconfont
          font-size 14px
          margin 0 10px
          color rgba(0, 0, 0, 0.38)
  .more
    width 100%
    color #008BEE
    cursor pointer
    text-align center
    font-size 12px
  .all
    width 100%
    color #999
    text-align center
    font-size 12px
</style>
